<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	var seats=[[ false, true, false, true, true, true, false, true, false ],
               [ false, true, false, false, true, false, true, true, true ],
               [ true, true, true, true, true, true, false, true, false ],
               [ true, true, true, false, true, false, false, true, false ]];
	var selSeat = -1;
	
	function initSeats(){
		for(var i =0;i<seats.length;i++){
			for(var j = 0 ;j<seats[i].length;j++){
				var img;
				var msg;
				if(seats[i][j]) {
					img="./images/seat_avail.png";
					msg="available seat";
				}
				else {
					img = "./images/seat_unavail.png";
					msg = "unavailable seat";
				}		
				setSeat(i*seats[i].length+j,img,msg);
				/* document.getElementById("seat"+(i*seats[i].length+j)).src = img;
				document.getElementById("seat"+(i*seats[i].length+j)).alt = msg; */
			}
		}
	}
	
	function setSeat(num,img,msg){
		document.getElementById("seat"+num).src = img;
		document.getElementById("seat"+num).alt = msg;
	}
	
	function findSeats(){
		if(selSeat >=0){
			selSeat = -1;
			initSeats();
		}
		
		var i=0,finished = false;
		while (i<seats.length && !finished) {
			for(var j=0;j < seats[i].length;j++){
				if(seats[i][j] &&seats[i][j+1]&&seats[i][j+2] ){
					selSeat = i*seats[i].length + j;
					var img = "./images/seat_select.png",msg="your seat";
					setSeat(i*seats[i].length+j,img,msg);
					setSeat(i*seats[i].length+j+1,img,msg);
					setSeat(i*seats[i].length+j+2,img,msg);
					
					/* document.getElementById("seat"+(i*seats[i].length+j)).src = img;
					document.getElementById("seat"+(i*seats[i].length+j)).alt = msg;
					document.getElementById("seat"+(i*seats[i].length+j+1)).src = img;
					document.getElementById("seat"+(i*seats[i].length+j+1)).alt = msg;
					document.getElementById("seat"+(i*seats[i].length+j+2)).src = img;
					document.getElementById("seat"+(i*seats[i].length+j+2)).alt = msg;
					 */
					var accept = confirm("Seat"+(j+1)+" through "+(j+3)+" in Row "+ (i+1)+ " are available. Accept?");
					if(accept){
						finished = true;
						break;
					}else{
						selSeat=-1;
						var img = "./images/seat_avail.png",msg="Available seat";
						setSeat(i*seats[i].length+j,img,msg);
						setSeat(i*seats[i].length+j+1,img,msg);
						setSeat(i*seats[i].length+j+2,img,msg);
						
						/* document.getElementById("seat"+(i*seats[i].length+j)).src = img;
						document.getElementById("seat"+(i*seats[i].length+j)).alt = msg;
						document.getElementById("seat"+(i*seats[i].length+j+1)).src = img;
						document.getElementById("seat"+(i*seats[i].length+j+1)).alt = msg;
						document.getElementById("seat"+(i*seats[i].length+j+2)).src = img;
						document.getElementById("seat"+(i*seats[i].length+j+2)).alt = msg; */
					}
				}
			}
			i++;
		}
	}
	
	var showSeatStatus=function(seatNum){
		//alert(seatNum);
		alert("this seat is "+document.getElementById("seat"+seatNum).alt);
	}
	var show = showSeatStatus;
	
	//window.onload = initSeats;
	window.onload = function(event){
		
		document.getElementById("findseats").onclick=findSeats;
		
		/* for(var i = 0 ;i<=35;i++){
			document.getElementById("seat"+i).onclick=function(evt){
				showSeatStatus(i);			
			};
		}	 */
		 // Wire the seat image events
        document.getElementById("seat0").onclick = function(evt) { showSeatStatus(0); };
        document.getElementById("seat1").onclick = function(evt) { showSeatStatus(1); };
        document.getElementById("seat2").onclick = function(evt) { showSeatStatus(2); };
        document.getElementById("seat3").onclick = function(evt) { showSeatStatus(3); };
        document.getElementById("seat4").onclick = function(evt) { showSeatStatus(4); };
        document.getElementById("seat5").onclick = function(evt) { showSeatStatus(5); };
        document.getElementById("seat6").onclick = function(evt) { showSeatStatus(6); };
        document.getElementById("seat7").onclick = function(evt) { showSeatStatus(7); };
        document.getElementById("seat8").onclick = function(evt) { showSeatStatus(8); };
        document.getElementById("seat9").onclick = function(evt) { showSeatStatus(9); };
        document.getElementById("seat10").onclick = function(evt) { showSeatStatus(10); };
        document.getElementById("seat11").onclick = function(evt) { showSeatStatus(11); };
        document.getElementById("seat12").onclick = function(evt) { showSeatStatus(12); };
        document.getElementById("seat13").onclick = function(evt) { showSeatStatus(13); };
        document.getElementById("seat14").onclick = function(evt) { showSeatStatus(14); };
        document.getElementById("seat15").onclick = function(evt) { showSeatStatus(15); };
        document.getElementById("seat16").onclick = function(evt) { showSeatStatus(16); };
        document.getElementById("seat17").onclick = function(evt) { showSeatStatus(17); };
        document.getElementById("seat18").onclick = function(evt) { showSeatStatus(18); };
        document.getElementById("seat19").onclick = function(evt) { showSeatStatus(19); };
        document.getElementById("seat20").onclick = function(evt) { showSeatStatus(20); };
        document.getElementById("seat21").onclick = function(evt) { showSeatStatus(21); };
        document.getElementById("seat22").onclick = function(evt) { showSeatStatus(22); };
        document.getElementById("seat23").onclick = function(evt) { showSeatStatus(23); };
        document.getElementById("seat24").onclick = function(evt) { showSeatStatus(24); };
        document.getElementById("seat25").onclick = function(evt) { showSeatStatus(25); };
        document.getElementById("seat26").onclick = function(evt) { showSeatStatus(26); };
        document.getElementById("seat27").onclick = function(evt) { showSeatStatus(27); };
        document.getElementById("seat28").onclick = function(evt) { showSeatStatus(28); };
        document.getElementById("seat29").onclick = function(evt) { showSeatStatus(29); };
        document.getElementById("seat30").onclick = function(evt) { showSeatStatus(30); };
        document.getElementById("seat31").onclick = function(evt) { showSeatStatus(31); };
        document.getElementById("seat32").onclick = function(evt) { showSeatStatus(32); };
        document.getElementById("seat33").onclick = function(evt) { showSeatStatus(33); };
        document.getElementById("seat34").onclick = function(evt) { showSeatStatus(34); };
        document.getElementById("seat35").onclick = function(evt) { showSeatStatus(35); };

		initSeats();
	}
	
	
</script>
</head>
 <body >
   <div style="margin-top:25px; text-align:center">
     <img id="seat0" src="" alt="" />
      <img id="seat1" src="" alt="" />
      <img id="seat2" src="" alt="" />
      <img id="seat3" src="" alt="" />
      <img id="seat4" src="" alt="" />
      <img id="seat5" src="" alt="" />
      <img id="seat6" src="" alt="" />
      <img id="seat7" src="" alt="" />
      <img id="seat8" src="" alt="" /><br />
      <img id="seat9" src="" alt="" />
      <img id="seat10" src="" alt="" />
      <img id="seat11" src="" alt="" />
      <img id="seat12" src="" alt="" />
      <img id="seat13" src="" alt="" />
      <img id="seat14" src="" alt="" />
      <img id="seat15" src="" alt="" />
      <img id="seat16" src="" alt="" />
      <img id="seat17" src="" alt="" /><br />
      <img id="seat18" src="" alt="" />
      <img id="seat19" src="" alt="" />
      <img id="seat20" src="" alt="" />
      <img id="seat21" src="" alt="" />
      <img id="seat22" src="" alt="" />
      <img id="seat23" src="" alt="" />
      <img id="seat24" src="" alt="" />
      <img id="seat25" src="" alt="" />
      <img id="seat26" src="" alt="" /><br />
      <img id="seat27" src="" alt="" />
      <img id="seat28" src="" alt="" />
      <img id="seat29" src="" alt="" />
      <img id="seat30" src="" alt="" />
      <img id="seat31" src="" alt="" />
      <img id="seat32" src="" alt="" />
      <img id="seat33" src="" alt="" />
      <img id="seat34" src="" alt="" />
      <img id="seat35" src="" alt="" /><br />
      <input type="button" id="findseats" value="Find Seats" />
    </div>
  </body>
</html>